<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 给一个 class = demo 这个元素添加样式 */
        .demo{
            width:300px;
            height:300px;
            background:red;
            border-radius: 0px;
            margin-left:100px;

            /* 给元素设置一个过渡的平缓效果 */
            /* transition-property: border-radius;  过渡哪个属性
            transition-duration: 1s;  过渡时间时长
            transition-timing-function: linear;   过渡的效果 均速
            transition-delay:0s; 延迟的时间 */
            
            /* 缩写transition ： 属性 过渡的时间长度 过渡的效果 */
            transition: all 1s linear;
        }
        
        /* 移入悬停 */
        .demo:hover{
            background:pink;
            border-radius: 100%;

            /* 变换的样式 */
            /* 缩放 */
            /* transform:scale(0.5); */

            /* 平移  px 像素*/
            /* transform: translateX(500px); */

            /* 旋转  角度 deg*/
            /* transform:rotate(100deg); */

            /* 拉伸 */
            /* transform:skew(90deg); */
        }


        .demo2{
            width:300px;
            height:300px;
            background: green;

            /* 设置自定义动画 */
            /* 设置动画名称 */
            animation-name: move;
            
            /*设置对象动画的持续时间*/
            animation-duration: 1.5s;

            /* 设置对象动画的过渡类型 */
            animation-timing-function: linear;

            /* 动画的次数 */
            animation-iteration-count:3;

            /* 设置动画效果可以反向运作 */
            animation-direction: alternate;

            /* 设置动画结束时候的状态 开始位置 或者是 结束位置 */
            animation-fill-mode: both;

            /* 缩写 */
            animation: move 1.5s linear infinite alternate both;
        }

        /* 鼠标悬停进来的时候 */
        .demo2:hover{
            /* 让动画暂停 */
            animation-play-state: paused;
        }

        /* 定义动画？ */
        /* @keyframes 我们所设置的自定义动画名称  */
        /* 动画过程 0起始 from ~ 100% to */
        @keyframes move{
            0%{
                background:red;
                margin-left:0px;
                border-radius: 0px;
            }

            50%{
                background:green;
                margin-left:200px;
                border-radius: 50px;
            }

            100%{
                background: black;
                margin-left:300px;
                border-radius: 100%;
            }
        }


    </style>
</head>
<body>
    <!-- 页面元素 是一个容器盒子 -->
    <div class="demo"></div>

    <br />
    <br />
    <br />
    <br />

    <div class="demo2">自定义动画</div>
</body>
</html>